<template>
    <!-- 申请 -->
    <div class="application box">
        <div class="title">
            <div class="left">
                <img src="images/home/application.svg">
                <b>申请</b>
            </div>
            <div class="right" @click="handleClickMore()">更多
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="content">
            <ul>
                <li @click="handleClick('/officearticles/apply')">
                    <img src="images/home/officeArticles.png" />
                    <h5>办公用品</h5>
                </li>
                <li @click="handleClick('/visitorsCardApp/list')">
                    <img src="images/home/accessSecurityCard.png" />
                    <h5>出入保障卡</h5>
                </li>
                <li @click="handleClick('/turnoverroom/list')">
                    <img src="images/home/turnoverRoom.png" />
                    <h5>周转房</h5>
                </li>
                <li @click="handleClick('/asset/apply')">
                    <img src="images/home/officeSupplies.png" />
                    <h5>办公物资</h5>
                </li>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
    export default {
        methods: {
            // 点击进入应用
            handleClick (path) {
                if (!path) return;
                this.$router.push({ path });
                this.$emit('sendAccesslog', path);
            },
            // 点击更多
            handleClickMore () {
                sessionStorage.removeItem('activeApply');
                this.$router.push({ path: '/mainFrame/apply?menuName=便捷申请' });
            }
        }
    }
</script>

<style scoped lang="less">
    .title {
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        line-height: 24px;
        margin: 20px 0 8px 0;
        .left {
            font-size: 18px;
            color: #283f65;
            img {
                width: 24px;
                height: 24px;
                margin-right: 4px;
                vertical-align: top;
            }
        }
        .right {
            font-size: 12px;
            color: #9ba5b8;
        }
    }
    .box {
        padding: 0 12px;
        box-sizing: border-box;
        h5 {
            font-size: 14px;
            line-height: 24px;
            margin-bottom: 4px;
            color: #283f65;
        }
        p {
            font-size: 12px;
            line-height: 16px;
            color: #9ba5b8;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li {
                width: 48.5%;
                height: 68px;
                margin-bottom: 8px;
                border-radius: 8px;
                padding-left: 16px;
                padding-top: 10px;
                box-sizing: border-box;
                position: relative;
            }
        }
        .iconImg {
            position: absolute;
            right: 0;
            bottom: 0;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .application {
        ul li {
            background: #f3f8ff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            height: 68px;
            h5 {
                color: #283f65;
                width: 70px;
                font-size: 14px;
                margin-left: 8px;
            }
            img {
                width: 48px;
                height: 48px;
                border-radius: 25px;
                box-shadow: 0px 7px 6px rgba(130, 142, 160, 0.1);
            }
        }
        li:nth-of-type(3) {
            margin-bottom: 0;
        }
        li:nth-of-type(4) {
            margin-bottom: 0;
        }
    }
</style>